body {
    /* background: #f2f2f2; */
    background: #282c34;
}

.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    background: #607d8b;
    color: #fff;
}

.center {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.line {
    box-sizing: border-box;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0;
    left: 0;
    background: #fff;

    --degree: calc(36deg * var(--i));
    animation: line 10s ease-in-out infinite;
}

@keyframes line {
    0% {
        transform: rotate(0) translate(0, 0) scale(0.01);
    }
    5% {
        transform: rotate(0) translate(0, 0) scale(1);
    }
    15% {
        transform: rotate(var(--degree)) translate(0, 0) scale(1);
    }
    20% {
        transform: rotate(var(--degree)) translate(0, -100px) scale(0.25, 1);
    }
    25% {
        transform: rotate(var(--degree)) translate(0, -100px) scale(0.25, 1)
            rotate(179deg);
    }
    30% {
        transform: rotate(var(--degree)) translate(0, -100px) scale(1, 0.25)
            rotate(179deg);
    }
    35% {
        transform: rotate(var(--degree)) translate(0, -60px) scale(1, 0.1);
    }
    40% {
        transform: rotate(var(--degree)) translate(0, -60px) scale(1, 0.1)
            translate(-30px, 0);
    }
    45% {
        transform: rotate(var(--degree)) translate(0, -60px) scale(1, 0.1)
            translate(30px, 0);
    }
    50% {
        transform: rotate(var(--degree)) translate(0, -60px) scale(0.1, 1);
    }
    55% {
        transform: rotate(var(--degree)) translate(0, -60px) scale(0.5, 1);
        border-radius: 0;
    }
    60% {
        transform: rotate(var(--degree)) translate(0, -80px) scale(0.5, 0.5)
            rotate(179deg);
        border-radius: 50%;
    }
    65% {
        transform: rotate(var(--degree)) translate(0, 0) scale(0.2, 0.2);
        border-radius: 50%;
    }
    70% {
        transform: rotate(var(--degree)) translate(0, -100px) scale(0.25, 1);
        border-radius: 0;
    }
    75% {
        transform: rotate(var(--degree)) translate(0, -100px) scale(0.25, 0.25);
    }
    80% {
        transform: rotate(var(--degree)) translate(0, -50px) scale(0.5, 0.5);
    }
    85% {
        transform: rotate(var(--degree)) translate(0, -50px) scale(0.5, 0.5)
            rotate(179deg) translate(-50px, 50px);
    }
    90% {
        transform: rotate(var(--degree)) translate(0, -30px) scale(0.5, 0.1);
    }
    95% {
        transform: rotate(var(--degree)) translate(0, -10px) scale(0.1, 0.5);
    }
    100% {
        transform: rotate(var(--degree)) translate(0, -300px) scale(0.1, 0.5);
    }
}
